<template>
  <view class="checkin-process reserve-box">
    <view class="line"></view>
    <view class="huoqu" @click="chooseInvoiceTitle">
      <image src="/static/img/weixin.png" mode="" class="weixin" />
      获取微信开票信息
    </view>
    <view class="fplx">发票类型</view>
    <view class="tabbox">
      <view
        class="tab"
        @click="changeType(1)"
        :class="{ tabactive: form.invoiceType == 1 }"
        >企业发票</view
      >
      <view
        class="tab"
        @click="changeType(2)"
        :class="{ tabactive: form.invoiceType == 2 }"
        >个人发票</view
      >
    </view>
    <view
      style="
        font-size: 20upx;
        padding-left: 60upx;
        padding-top: 40upx;
        padding-bottom: 60upx;
      "
      >企业发票必须填写纳税人识别号（税号）才可作为合法税务凭证</view
    >

    <view class="formview">
      <form action>
        <view class="cu-form-group">
          <text class="xing">*</text>

          <view class="title">发票抬头</view>：
          <input
            name="input"
            v-model="form.invoiceTitle"
            placeholder="请填写发票抬头"
            placeholder-style="color:#ccc;"
          />
          <image
            src="../../static/img/zhangpu.png"
            mode=""
            style="width: 42upx; height: 42upx"
            @click="selectInvoice(form.invoiceType)"
          ></image>
        </view>
        <view class="cu-form-group" v-if="form.invoiceType == 1">
          <text class="xing">*</text>

          <view class="title">税号</view>：
          <input
            name="input"
            v-model="form.dutyParagraph"
            placeholder="请填写税号"
            placeholder-style="color:#ccc;"
          />
        </view>
        <view class="cu-form-group" v-if="form.invoiceType == 1">
          <text class="xing opc">*</text>

          <view class="title">地址及电话</view>：
          <input
            name="input"
            v-model="form.addressAndTelephone"
            placeholder="请填写地址及电话"
            placeholder-style="color:#ccc;"
          />
        </view>
        <view class="cu-form-group" v-if="form.invoiceType == 1">
          <text class="xing opc">*</text>

          <view class="title">开户行帐号</view>：
          <input
            name="input"
            v-model="form.bankAndNumber"
            placeholder="请填写开户行帐号"
            placeholder-style="color:#ccc;"
          />
        </view>
        <view class="cu-form-group">
          <text class="xing">*</text>

          <view class="title">姓名</view>：
          <input
            placeholder="请填写姓名"
            placeholder-style="color:#ccc;"
            name="input"
            v-model="form.name"
          />
        </view>
        <view class="cu-form-group">
          <text class="xing">*</text>

          <view class="title">手机号码</view>：
          <input
            placeholder="请填写手机号码"
            placeholder-style="color:#ccc;"
            name="input"
            v-model="form.phoneNumber"
          />
        </view>
        <view class="cu-form-group">
          <text class="xing opc">*</text>

          <view class="title">邮箱地址</view>：
          <input
            placeholder="请填写邮箱地址"
            placeholder-style="color:#ccc;"
            name="input"
            v-model="form.email"
          />
        </view>
        <view class="cu-form-group">
          <text class="xing opc">*</text>

          <view class="title">备注</view>：
          <input
            placeholder="请填写备注"
            placeholder-style="color:#ccc;"
            name="input"
            v-model="form.remarks"
          />
        </view>
      </form>
      <view>
        <view class="sure" @click="send">确认</view>
      </view>
    </view>
  </view>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
export default {
  components: {
    MxDatePicker,
  },
  data() {
    return {
      data: "",
      form: {
        dutyParagraph: "",
        email: "",
        invoiceTitle: "",
        invoiceType: 1,
        invoiceValue: "",
        name: "",
        orderNumber: "",
        phoneNumber: "",
        sysPhoneNumber: "",
        addressAndTelephone: "",
        bankAndNumber: "",
        remarks: "",
        enterpriseId: "",
        enterpriseName: "",
        hotelId: "",
        hotelName: "",
      },
    };
  },
  computed: {},
  methods: {
    selectInvoice(type) {
      console.log(type);
      uni.navigateTo({
        url: "/pages/InvoiceTitle/InvoiceList?add=2&typeval=" + type,
      });
    },
    changeType(v) {
      this.form.invoiceType = v;
      this.form.dutyParagraph = "";
      this.form.email = "";
      this.form.invoiceTitle = "";
      this.form.name = "";
      this.form.phoneNumber = "";
      this.form.addressAndTelephone = "";
      this.form.bankAndNumber = "";
      this.form.remarks = "";
      //    this.data = JSON.parse(options.item);
      // this.form.orderNumber = this.data.orderNumber;
      // this.form.invoiceValue = this.data.orderPrice;
      // this.form.sysPhoneNumber = uni.getStorageSync("phone");
      // this.form.enterpriseId = this.data.enterpriseId;
      // this.form.enterpriseName = this.data.enterpriseName;
      // this.form.hotelId = this.data.hotelId;
      // this.form.hotelName = this.data.hotelName;
    },
    send() {
      if (!this.form.invoiceTitle) {
        uni.showToast({
          icon: "none",
          title: "请填写发票抬头",
          duration: 2000,
        });
        return;
      }
      if (
        this.form.invoiceType == 1 &&
        !/^[A-Z0-9]{15}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(
          this.form.dutyParagraph
        )
      ) {
        uni.showToast({
          icon: "none",
          title: "请填正确税号",
          duration: 2000,
        });
        return;
      }
      if (!this.form.name) {
        uni.showToast({
          icon: "none",
          title: "请填写姓名",
          duration: 2000,
        });
        return;
      }
      if (!this.form.phoneNumber) {
        uni.showToast({
          icon: "none",
          title: "请填写手机号",
          duration: 2000,
        });
        return;
      }
      // if (!this.form.email) {
      //   uni.showToast({
      //     icon: "none",
      //     title: "请填写邮箱地址",
      //     duration: 2000
      //   });
      //   return;
      // }
      uni.showLoading({
        title: "提交中",
        mask: true,
      });
      this.$http
        .post("/invoiceRecord/audit", this.form, {
          header: {
            "Content-Type": "application/json;charset=UTF-8",
          },
          dataType: "json",
          responseType: "text",
        })
        .then((res) => {
          uni.hideLoading();
          let data = res.data;
          if (data.code == 0) {
            uni.showToast({
              image: "/static/img/success.png",
              title: "申请成功",
              duration: 2000,
            });
            // uni.navigateTo({
            //   url: "/pages/myorder/myorder",
            // });
            uni.navigateBack();
          } else {
            uni.showToast({
              icon: "none",
              title: data.msg,
              duration: 2000,
            });
          }
        })
        .catch((err) => {});
    },
    chooseInvoiceTitle() {
      uni.chooseInvoiceTitle({
        success: (res) => {
          console.log(res.type);
          console.log(res.title);
          console.log(res.taxNumber);
          console.log(res.companyAddress);
          console.log(res.telephone);
          console.log(res.bankName);
          console.log(res.bankAccount);
          setTimeout((item) => {
            if (this.form.invoiceType == 2) {
              this.form.invoiceTitle = res.title;
              this.form.phoneNumber = res.telephone;
            } else {
              this.form.invoiceTitle = res.title;
              this.form.taxpayerRegistrationNum = res.taxNumber;
              this.form.bankAndNumber = res.bankAccount;
              this.form.dutyParagraph = res.taxNumber;
              this.form.addressAndTelephone =
                res.companyAddress + res.telephone;
              this.form.phoneNumber = res.telephone;
            }
          }, 50);
        },
      });
    },
  },

  created() {},
  onShow(options) {
    console.log("showwwwwwwww");
    this.form.dutyParagraph = "";
    this.form.email = "";
    this.form.invoiceTitle = "";
    // this.form.invoiceType=1;
    this.form.name = "";
    this.form.phoneNumber = "";
    this.form.addressAndTelephone = "";
    this.form.bankAndNumber = "";
    this.form.remarks = "";

    // this.form.enterpriseId='',
    // this.form.enterpriseName:'',
    // this.form.hotelId:'',
    // this.form.hotelName:'',
    // this.form.orderNumber:'',

    if (uni.getStorageSync("selectinvoiceData")) {
      let data = uni.getStorageSync("selectinvoiceData");
      console.log(uni.getStorageSync("selectinvoiceData"));
      this.form.invoiceTitle = data.invoiceTitle;
      // this.form.invoiceType=data.invoiceType;
      this.form.dutyParagraph = data.taxpayerRegistrationNum;
      this.form.name = data.invoiceName;
      this.form.phoneNumber = data.invoicePhone;
      this.form.email = data.invoiceEmail;
      this.form.addressAndTelephone = data.addressAndTelephone;
      this.form.bankAndNumber = data.bankAndNumber;

      uni.removeStorageSync("selectinvoiceData");
    }
  },
  onLoad(options) {
    console.log("loadloadloadloadloadloadloadloadload");

    this.data = JSON.parse(options.item);
    this.form.orderNumber = this.data.orderNumber;
    this.form.invoiceValue = this.data.orderPrice;
    this.form.sysPhoneNumber = uni.getStorageSync("phone");
    this.form.enterpriseId = this.data.enterpriseId;
    this.form.enterpriseName = this.data.enterpriseName;
    this.form.hotelId = this.data.hotelId;
    this.form.hotelName = this.data.hotelName;
  },
};
</script>
<style scoped>
.reserve-box {
  min-height: 100%;
  height: auto !important;
}
.tabbox {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0rpx 30rpx;
  padding-bottom: 40rpx;
}
.tab {
  width: 240rpx;
  height: 80rpx;
  background: rgba(245, 245, 245, 1);
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(0, 0, 0, 1);
}
.tabline {
  height: 2px;
  width: 63rpx;
  background: rgba(67, 130, 255, 1);
  opacity: 0;
}
.tabname {
}
.tabactive {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  background: url("/static/img/bgg.png") no-repeat;
  background-position: center;
  background-size: cover;
}
.tabactive .tabline {
  opacity: 1;
}
.title {
  min-width: 170rpx;
  font-size: 32rpx;
  font-weight: bold;
  font-size: PingFang SC;
}
/* .title {
  text-align: justify;
  text-align-last: justify;
} */
.title::after {
  width: 100%;
  display: inline-block;
  content: "";
}
.cu-form-group .title {
  /* height: 50rpx; */
  padding-right: 0px;
}
.xing {
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 145, 37, 1);
}
.sure {
  width: 100%;
  height: 88rpx;
  background: rgba(67, 130, 255, 1);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 1);
  margin: auto;
  margin-top: 60px;
}
.opc {
  opacity: 0;
}
.fplx {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(121, 121, 121, 1);
  margin-left: 30rpx;
  margin-bottom: 30rpx;
  margin-top: 40rpx;
}
.formview {
  padding: 0 30rpx;
}
.weixin {
  height: 42rpx;
  width: 42rpx;
  margin-right: 10px;
}
.huoqu {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  font-size: 32rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
  color: #ff9125;
  margin-top: 40rpx;
}
</style>
<style >
page {
  background-color: #ffffff !important;
}
.cu-form-group {
  padding: 0 0rpx !important;
}
.cu-form-group input {
  display: flex;
  align-items: center;
  height: 60rpx;
}
</style>